import React from "react"
// 创建类组件

type Istate = {
    name: string;
    age: number;
}

class Com2 extends React.Component<any,Istate> {
    timeout: number
    constructor(props:any){
        super(props)
        this.state = {
            name:"守望先锋",
            age:10
        }
        // 初始化timeout
        this.timeout = 0;
    }
 
    // 组件挂载之后
    componentDidMount(): void {
        // 变更状态再react 一定要调用setState() => 会触发render
        this.timeout = window.setTimeout(() => {
            this.setState({
                name:"英雄联盟"
            })
            // console.log(this.state.name);
        },2000)

        // 如何正确的修改状态
        // 1.不要直接修改this.state
        // 2.状态的更新可能是异步的
        // 3.状态的更新会合并,在同一个函数中多次调用setState,
        // 最终会合并成一个调用，来提高性能
    }

    render():React.ReactNode{
        // render是react 生命周期中的一个钩子函数
        // 这个钩子函数非常重要，这里会进行diff 算法和更新虚拟dom
        return(
            <fieldset>
                <legend>正确使用组件状态的三件事</legend>
                <h1>组件的state中的name:{this.state.name}</h1>
            </fieldset>
        )
    }
}

export default Com2